<template>
  <div style="width: 100%; height: 100%">
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      @tab-click="handleClick"
      v-loading="isRequest"
    >
      <el-tab-pane label="个人" name="first">
        <studentList
          :volunteerList="volunteerList"
          @onClickOptionItem="onClickOptionItem"
        ></studentList>
      </el-tab-pane>
      <el-tab-pane label="专家" name="second">
        <expertList
          :volunteerList="volunteerList"
          @onClickOptionItem="onClickOptionItem"
        ></expertList>
      </el-tab-pane>
      <div class="right" style="margin: 10px 0">
        <!-- <el-config-provider :locale="zhCn"> -->
        <el-pagination
          v-model:current-page="pageData.page"
          v-model:page-size="pageData.pageSize"
          :page-sizes="[10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total"
          @size-change="getzybList"
          @current-change="getzybList"
        />
        <!-- </el-config-provider> -->
      </div>
    </el-tabs>
  </div>

  <el-dialog v-model="dialogFormVisible" title="志愿表命名" width="500">
    <el-form>
      <el-form-item label="志愿表名称">
        <el-input
          v-model="volunteerTitle"
          autocomplete="off"
          placeholder="请输入志愿表名称"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="onClickUpdateTitle"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import studentList from './components/studentList.vue';
import expertList from './components/expertList.vue';
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { zySave, zyList } from '@/api/volunteer/volunteer';
import { ElMessage } from 'element-plus';

const router = useRouter();
const activeName = ref('first');
const volunteerList = ref([]);
const isRequest = ref(false);
const dialogFormVisible = ref(false); // 是否显示修改志愿表名称弹窗
const volunteerTitle = ref(''); // 志愿表标题
const selIndex = ref(-1);

const pageData = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});

getzybList();
function getzybList() {
  if (isRequest.value) return;
  isRequest.value = true;

  let data = {
    fronttype: 3,
    page: pageData.page,
    pageSize: pageData.pageSize,
    mod: 1,
  };

  if (activeName.value == 'first') {
    data['createFrom'] = '0';
    data['isStudentSee'] = 1;
  } else {
    data['createFrom'] = '1';
    data['isStudentSee'] = 1;
  }

  zyList(data)
    .then((res) => {
      isRequest.value = false;
      let data = res.data.data;
      if (pageData.page == 1) {
        volunteerList.value = data.data;
      } else {
        // volunteerList.value = [...volunteerList.value, ...data.data]
        volunteerList.value = data.data;
      }

      pageData.total = data.total;
    })
    .catch(() => {
      isRequest.value = false;
    });
}

// 切换组件信息
function handleClick(val) {
  if (activeName.value != val.paneName) {
    activeName.value = val.paneName;
    getzybList();
  }
}

/**
 * 点击志愿表操作选项
 * @param {Number} index 下标
 * @param {Number} type 操作类型 0-查看 1-重命名 2-删除
 */
function onClickOptionItem(index, type, status, isZhuanjia) {
  switch (type) {
    case 0: // 查看志愿表
      seeVolunteer(index, status, isZhuanjia);
      break;
    case 1: // 重命名
      dialogFormVisible.value = true;
      selIndex.value = index;
      volunteerTitle.value = volunteerList.value[index].title;
      break;
    case 2: // 删除
      deleteVolunteer(index);
      break;
    default:
      break;
  }
}

/**
 * 查看志愿表
 * @param {Number} index 志愿表下标
 */
function seeVolunteer(index, status, isZhuanjia) {
  let volunteer = volunteerList.value[index];

  let body = JSON.stringify({
    index: volunteer.index,
    zy_type: volunteer.zy_type,
    status: status,
    isZhuanjia,
  });

  router.push({
    path: '/savevolunteer',
    query: {
      data: body,
    },
  });
}

/**
 * 删除志愿表
 * @param {Number} index 志愿表下标
 */
function deleteVolunteer(index) {
  let volunteer = volunteerList.value[index];
  let data = {};
  data['index'] = volunteer.index;
  data['operate'] = 'del';

  zySave(data).then(() => {
    // 删除成功
    volunteerList.value.splice(index, 1);
    ElMessage({
      message: '删除成功',
      type: 'success',
    });
  });
}

// 修改志愿表标题
function onClickUpdateTitle() {
  let volunteer = volunteerList.value[selIndex.value];
  dialogFormVisible.value = false;
  volunteer.title = volunteerTitle.value;

  let data = {};
  data['title'] = volunteerTitle.value;
  data['index'] = volunteer.index;

  zySave(data).then(() => {
    // 修改成功
    ElMessage({
      message: '更新成功',
      type: 'success',
    });
  });
}
</script>

<style lang="scss" scoped></style>
